<template>
  <div class="main">
        <el-container class="left">
          <div class="header">
            <!-- 活动开始情况与标签筛选 -->
            <div class="selects" style="background-color: #fbf4e8;">
              <!-- 根据活动开始情况筛选 -->
                <template>
                  <el-row style="height: 38px;width: 100%;">
                      <el-button class="btn" type="warning" style="width: 120px;" :plain="isStart"  @click="isStart=!isStart">未开始活动</el-button>
                      <el-button class="btn" type="warning" style="width: 120px;" :plain="!isStart" @click="isStart=!isStart">已开始活动</el-button>
                  </el-row>
                </template>
              <!-- 根据标签筛选 -->
                <template>
                  <el-select v-model="value" placeholder="更多筛选" filterable class="tags-select">
                    <el-option
                      v-for="item in types"
                      :key="item.id"
                      :label="item.value"
                      :value="item.value">
                      <span style="float: left">{{ item.value }}</span>
                    </el-option>
                  </el-select>
                </template>
            </div>
            <!-- 活动时间 活动地区筛选 -->
            <div style="position:relative">
              <div class="select-time">
                <span style="display:inline-block; width: 120px; text-align: center; margin-right: 3px;">时间筛选</span>
                <button 
                :class="item.isActive?'btn-mouth active ':' btn-mouth'"
                v-for="item in mouths" 
                :key="item.id" 
                :style="{width: item.id==0? 60+'px':40+'px' }"
                @click="Mactive(item.id)"
                >{{item.value}}</button>
              </div>
              <div class="select-time">
                  <div class="area" style="display: inline-block; margin-right: 3px;" @click="areashow()">
                    <span style="display:inline-block; line-height: 38px; width: 120px; text-align: center; background-color: #8dd9f1;">
                      <i class="el-icon-map-location" style="color:#fff;font-size: 18px;"></i>
                      {{areas[index].value}}
                      <i v-show="isHide" class="el-icon-caret-top" style="color:#fff;font-size: 14px;"></i>
                      <i v-show="!isHide" class="el-icon-caret-bottom" style="color:#fff;font-size: 14px;"></i>
                    </span>
                  </div>
                  <button 
                  :class="item.isActive?'btn-mouth active ':' btn-mouth'"
                  v-show="item.id<10"
                  v-for="item in areas" 
                  :key="item.id" 
                  :style="{width: item.id==0? 60+'px':50+'px' }"
                  @click="Aactive(item.id)"
                  >{{item.value}}</button>
              </div>
              <el-collapse-transition >
                <div v-show="show3" style="position:absolute">
                  <div style="width: 280px;border: 1px solid black;background-color: #fff; ">
                    <button 
                      :class="item.isActive?'btn-mouth active btn-area ':' btn-mouth btn-area'"
                      v-show="item.id!=0"
                      v-for="item in areas" 
                      :key="item.id" 
                      @click="Aactive(item.id)"
                      >{{item.value}}</button>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </div>
          <div class="activity-list">
            <div class="single" @click="$router.push('../home/actdetail')" v-for="item in allAct" :key="item.pid"> 
              <img :src="item.pic" width="140px" alt="">
              <div class="detail">
                <p style="margin: 10px 5px 15px;font-size: 18px;height: 40px;">{{item.title}}</p>
                <div style="display: flex;color: #ffbc47;" >
                  <p style="margin: 5px;padding:0">
                    <i class="el-icon-location" style="font-size: 18px;"></i>
                    <span style="font-size: 14px;">{{item.areas}}</span> 
                  </p>
                  <p style="margin: 5px 5px 5px 25px;padding:0">
                    <i class="el-icon-pie-chart" style="font-size: 18px;"></i>
                    <span style="font-size: 14px; margin-left: 5px;">{{item.dates}}</span>
                  </p>
                </div>
                <p style="font-size: 14px;color:#666;height: 38px;margin-left:5px;">地址：{{item.addr}}</p>
                <p style="font-size: 14px;height: 25px;color:#666;line-height: 25px;margin-left:5px;display: flex; align-items: center;">
                  <span>综合评分:</span>
                    <el-rate v-model="item.score*0.5" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                   
                </p>
                <el-tag v-show="item.Is_recommend==1?true:false" type="danger" effect="dark" style="margin-left:5px;">
                  喵特推荐
                </el-tag>
                <div class="activity-detail">
                  <span style="margin-left:5px ;">详情</span>
                </div>
                <div class="activity-love">
                  <i class="el-icon-star-on"></i>
                  <span style="margin-left:5px; ">{{item.collect}}</span>
                </div>
              </div>
            </div>
            <!-- <div class="single"> 
              <img src="https://img.nyato.com/data/upload/2023/0311/10/640bed5ae3da0.jpg!330x450cut" width="140px" alt="">
              <div class="detail">
                <p style="margin: 10px 5px 15px;font-size: 18px;height: 40px;">AACGPRO动漫游戏展</p>
                <div style="display: flex;color: #ffbc47;" >
                  <p style="margin: 5px;padding:0">
                    <i class="el-icon-location" style="font-size: 18px;"></i>
                    <span style="font-size: 14px;">上海市</span> 
                  </p>
                  <p style="margin: 5px 5px 5px 25px;padding:0">
                    <i class="el-icon-pie-chart" style="font-size: 18px;"></i>
                    <span style="font-size: 14px; margin-left: 5px;">04/30 - 05/01</span>
                  </p>
                </div>
                <p style="font-size: 14px;color:#666;height: 38px;margin-left:5px;">地址：上海市 上海市 普陀区上海跨国采购会展中心</p>
                <p style="font-size: 14px;height: 25px;color:#666;line-height: 25px;margin-left:5px;display: flex; align-items: center;">
                  <span>综合评分: </span>
                    <el-rate v-model="ratevalue" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                   
                </p>
                <el-tag type="danger" effect="dark" style="margin-left:5px;">
                  喵特推荐
                </el-tag>
                <div class="activity-detail">
                  <span style="margin-left:5px ;">详情</span>
                </div>
                <div class="activity-love">
                  <i class="el-icon-star-on"></i>
                  <span style="margin-left:5px; ">92</span>
                </div>
              </div>
            </div>
            <div class="single"> 
              <img src="https://img.nyato.com/data/upload/2023/0311/10/640bed5ae3da0.jpg!330x450cut" width="140px" alt="">
              <div class="detail">
                <p style="margin: 10px 5px 15px;font-size: 18px;height: 40px;">AACGPRO动漫游戏展</p>
                <div style="display: flex;color: #ffbc47;" >
                  <p style="margin: 5px;padding:0">
                    <i class="el-icon-location" style="font-size: 18px;"></i>
                    <span style="font-size: 14px;">上海市</span> 
                  </p>
                  <p style="margin: 5px 5px 5px 25px;padding:0">
                    <i class="el-icon-pie-chart" style="font-size: 18px;"></i>
                    <span style="font-size: 14px; margin-left: 5px;">04/30 - 05/01</span>
                  </p>
                </div>
                <p style="font-size: 14px;color:#666;height: 38px;margin-left:5px;">地址：上海市 上海市 普陀区上海跨国采购会展中心</p>
                <p style="font-size: 14px;height: 25px;color:#666;line-height: 25px;margin-left:5px;display: flex; align-items: center;">
                  <span>综合评分: </span>
                    <el-rate v-model="ratevalue" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                   
                </p>
                <el-tag type="danger" effect="dark" style="margin-left:5px;">
                  喵特推荐
                </el-tag>
                <div class="activity-detail">
                  <span style="margin-left:5px ;">详情</span>
                </div>
                <div class="activity-love">
                  <i class="el-icon-star-on"></i>
                  <span style="margin-left:5px; ">92</span>
                </div>
              </div>
            </div> -->
          </div>
        </el-container>
      <div class="right">
        <div style="width: 260px;text-align:center">
          <el-button type="danger" class="right-btn">
            <i class="el-icon-s-promotion"></i>
            创建新活动
          </el-button>
        </div>
        <div style="margin-top: 15px; border: 1px solid #eee;box-shadow: 5px 5px 5px #dedede;background-color: #fff;border-radius: 5px;">
          <p class="finished-title">近期结束活动回顾</p>
          <ul class="list">
            <li class="li-title">
              <p>地点</p>
              <p>活动名称</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p class="p2">2023 TGC·腾讯游戏超级世界 武汉站腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
            <li class="li-content">
              <p>武汉市</p>
              <p>2023 TGC·腾讯游戏超级世界 武汉站</p>
            </li>
          </ul>
        </div>
      </div>
  </div>
</template>

<script>
import httpApi from  '@/http'
  export default {
    data() {
      return {
          ratevalue:3.5,//活动评分
          show3:false,
          allAct:[],
          noStart:[],//未开始活动列表
          started:[],//已开始活动列表
          types:[//标签筛选
            {
            id:0,
            value:'全部参展'
            },{
            id:1,
            value:'同人展会'
            },{
            id:2,
            value:'动漫/游戏展'
            },{
            id:3,
            value:'演唱会'
            },{
            id:4,
            value:'音乐会'
            }, 
          ],
          page:1,
          pagesize:10,
          totalpage:1000,
          value:'',
          isStart:false,
          isActive:false,
          isHide:true,
          index:0,//地区按钮与后边激活按钮显示一致 默认显示全部地区
          mouths:[
            {
              id:0,
              value:'全部时间',
              isActive:true
            },
            {
              id:1,
              value:'1月',
              isActive:false
            },{
              id:2,
              value:'2月',
              isActive:false
            },{
              id:3,
              value:'3月',
              isActive:false
            },{
              id:4,
              value:'4月',
              isActive:false
            },{
              id:5,
              value:'5月',
              isActive:false
            },{
              id:6,
              value:'6月',
              isActive:false
            },{
              id:7,
              value:'7月',
              isActive:false
            },{
              id:8,
              value:'8月',
              isActive:false
            },{
              id:9,
              value:'9月',
              isActive:false
            },{
              id:10,
              value:'10月',
              isActive:false
            },{
              id:11,
              value:'11月',
              isActive:false
            },{
              id:12,
              value:'12月',
              isActive:false
            },

          ],
          areas:[{
            id:0,
            value:'全部地区',
            isActive:true
          },{
            id:1,
            value:'北京市',
            isActive:false
          },{
            id:2,
            value:'上海市',
            isActive:false
          },{
            id:3,
            value:'成都市',
            isActive:false
          },{
            id:4,
            value:'广州市',
            isActive:false
          },{
            id:5,
            value:'深圳市',
            isActive:false
          },{
            id:6,
            value:'重庆市',
            isActive:false
          },{
            id:7,
            value:'天津市',
            isActive:false
          },{
            id:8,
            value:'武汉市',
            isActive:false
          },{
            id:9,
            value:'南京市',
            isActive:false
          },{
            id:10,
            value:'河北省',
            isActive:false
          },{
            id:11,
            value:'陕西省',
            isActive:false
          },{
            id:12,
            value:'山西省',
            isActive:false
          },{
            id:13,
            value:'内蒙古',
            isActive:false
          },{
            id:14,
            value:'辽宁省',
            isActive:false
          },{
            id:15,
            value:'吉林省',
            isActive:false
          },{
            id:16,
            value:'黑龙江省',
            isActive:false
          },{
            id:17,
            value:'江苏省',
            isActive:false
          },{
            id:18,
            value:'浙江省',
            isActive:false
          },{
            id:19,
            value:'安徽省',
            isActive:false
          },{
            id:20,
            value:'福建省',
            isActive:false
          },{
            id:21,
            value:'江西省',
            isActive:false
          },{
            id:22,
            value:'山东省',
            isActive:false
          },{
            id:23,
            value:'河南省',
            isActive:false
          },{
            id:24,
            value:'湖北省',
            isActive:false
          },{
            id:25,
            value:'湖南省',
            isActive:false
          },{
            id:26,
            value:'广东省',
            isActive:false
          },{
            id:27,
            value:'广西省',
            isActive:false
          },{
            id:28,
            value:'海南省',
            isActive:false
          },{
            id:29,
            value:'四川省',
            isActive:false
          },{
            id:30,
            value:'四川省',
            isActive:false
          },{
            id:31,
            value:'贵州省',
            isActive:false
          },{
            id:32,
            value:'云南省',
            isActive:false
          },{
            id:33,
            value:'西藏',
            isActive:false
          },{
            id:34,
            value:'甘肃省',
            isActive:false
          },{
            id:35,
            value:'青海省',
            isActive:false
          },{
            id:36,
            value:'宁夏',
            isActive:false
          },{
            id:37,
            value:'新疆',
            isActive:false
          },{
            id:38,
            value:'中国香港',
            isActive:false
          },{
            id:39,
            value:'中国澳门',
            isActive:false
          },{
            id:40,
            value:'海外',
            isActive:false
          },{
            id:41,
            value:'中国台湾',
            isActive:false
          }
          ],
          // 近期结束活动
          finished:[{
            area:'上海市',
            title:'2021 TGC·腾讯游戏超级世界 武汉站'
          },{
            area:'上海市',
            title:'2021 TGC·腾讯游戏超级世界 武汉站'
          },{
            area:'上海市',
            title:'2021 TGC·腾讯游戏超级世界 武汉站'
          }
          ],
      }
    },
    mounted () {
      this.queryAllActivity()
      // this.sortActivity()
      // console.log(typeof this.noStart);
    },
    methods: {
      // 时间月份筛选
      Mactive(id) {
        this.mouths.forEach(v=>{
          if(v.isActive){
            v.isActive=false
          }
        })
        this.mouths[id].isActive=true
      },
      // 地区筛选
      Aactive(id){
        this.areas.forEach(v=>{
          if(v.isActive){
            v.isActive=false
          }
        })
        this.areas[id].isActive=true
        this.index=id
      },
      //地区列表显示与隐藏
      areashow(){
        this.show3=!this.show3
        this.isHide=!this.isHide
      },
      //请求到所有活动列表
      queryAllActivity(){
        let params={page:this.page,pagesize:this.pagesize}
        let list=[]
        httpApi.activity.queryAllActivity().then(res=>{
          // console.log(typeof res.data.data);
          console.log(res.data);
          this.allAct.push(...res.data.data)
          this.allAct=res.data.data//noStart是在data中定义的一个空数组  res.data.data是一个[{...},{...},{....}]数据
          console.log(this.allAct[0],1);//可以拿到数据
          console.log(this.allAct,2);//可以拿到数据
          // 活动列表分类
          for(let k=0;k<this.allAct.length;k++){
              console.log(this.allAct[k].dates.split('-'));
              let arr=this.allAct[k].dates.split('-')
              let arr1=[]
              for(let i=0;i<arr.length;i++){
                console.log(arr[i].split('/')); 
                arr1=arr1.concat(arr[i].split('/'))
              }
              console.log(arr1);
              for(let j=0;j<arr1.length;j++){
                arr1[j]=arr1[j].trim()
              }
              console.log(arr1);
              let time1=2023+'-'+ arr1[0]+'-'+arr1[1]//活动开始时间
              let time2=2023+'-'+ arr1[2]+'-'+arr1[3]//活动结束时间
              let timestart=Date.parse(time1)
              let timeend=Date.parse(time2)
              console.log(timestart);
              console.log(timeend);
              let date=new Date
              const y=date.getFullYear()
              const m=date.getMonth()+1
              const d=date.getDate()
              let nowdate=y+'-'+m+'-'+d  //当前时间
              if(timestart<Date.parse(nowdate)){
                this.started=this.started.concat(this.allAct[k])
              }else{
                this.noStart=this.noStart.concat(this.allAct[k])
              }
          }
          console.log(this.noStart,this.started);

        })
        console.log(this.noStart[0],3);//到这里就是  输出结果undefined 为什么? 因为异步
      },
      // 活动列表分类
      sortActivity(){
        console.log('活动列表',this.noStart[0]);
        let obj=this.noStart[0]
        console.log( '121',obj);
        let str=obj.dates
        let arr=str.split('-')
        console.log(arr);
      }
    },
  }
</script>

<style lang="scss" scoped>

// 活动开始情况与标签筛选
.main{
  width: 1200px;
  // background-color: red;
  margin: 0 auto;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  /*************右边创建活动css样式设置*************************************/ 
  .right{
    cursor: pointer;
    .finished-title{
      font-size: 24px;
      color: #666d74;
      text-align: center;
    }
    .list{
      width: 260px;
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: center;
      p:hover{
        color: #f56c6c;
      }
      .li-title{
        width: 260px;
        display: flex;
        justify-content: space-between;
        p{
          padding: 5px 15px;
          font-size: 12px;
          border-bottom: 1px solid #ffc867;
        };
        &:nth-child(1){
          color: #666d74;
          text-align: center;
          
        }
        &:nth-child(2){
          color: #666d74;
          text-align: center;
        }

      }
      .li-content{
        width: 260px;
        margin-top: 10px;
        display: flex;
        justify-content: space-evenly;
        font-size: 12px;
        p{
          height: 32px;
        }
        &:nth-child(1){
          color: #666d74;
          text-align: center;
        }
        .p2{
          width: 194px;
          text-align: left!important;;
          color: #666d74;
          text-align: center;
          &:hover{
            color: #f56c6c;
          }
        }
      }
    }
  }
}
.left{
  width: 900px;
  // height: 1200px;
  // border: 1px solid black;
  margin-right: 20px;
  flex-direction: column;
}
.left .header{
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}
.header .selects{
  display: flex;
  background-color: #fbf4e8;
}
.left .btn{
  margin: 0;
  border: none; 
  border-radius: 0;
}
// 活动时间筛选样式
.select-time{
  background-color: #fff;
  box-sizing: border-box;
  height: 38px;
}
.btn-mouth{
    height: 30px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 30px;
    border:none;
    color: #333;
    outline: none;
    background-color: #fff;
    margin-top: 3px;
    margin-right: 7px;
    &:hover{
      border-radius: 100px;
      background-color: #8dd9f1;
      color: #fff;
      cursor: pointer;
    }
    &.active{
      border-radius: 100px;
      background-color: #8dd9f1;
      color: #fff;
    }
}
.select-time .area{
  color: #fff;
  // opacity: 0.8;
  &:hover{
    color: #ddf4fb;
    cursor: pointer;
    // opacity: 1;
  }
}
.btn-area{
  margin: 3px 5px 0px;
  width: 60px;
}
//活动列表
.activity-list{
  position: relative;
  height: 3020px;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
// 活动列表 单个盒子css设置
.activity-list .single{
  position: relative;
  display: flex;
  width: 400px;
  height: 200px;
  box-sizing: border-box; 
  background-color: #fff;
  border: 1px solid #aaa; 
  border-radius: 5px;
  margin-top: 30px;
  // position: relative;
  &:hover{
    box-shadow: 15px 15px 15px #eee ;
    transform: translateY(-5px);
  }

}
// 收藏个数样式
.activity-list .single .detail .activity-love{
  width: 50px;
  height: 24px;
  background-color: #f7ba2a;
  color: #f56c6c;
  position: absolute;
  bottom: 0;
  left:91px;
}
// 图片左上角详情图标
.activity-list .single .detail .activity-detail{
  position: absolute;
  background-color: #f56c6c;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 0;
  color: #fff;
  line-height: 40px;
  border-radius: 5px;
  border-bottom-right-radius: 100px;
}



</style>